<template>
    <el-dialog v-model="visible" :title="title" width="500px" >
        <el-form :model="formData" ref="formRef" :rules="rules" label-width="110px" v-loading="loading">
            <el-form-item label="键" prop="key">
                <el-input v-model="formData.key" placeholder="请输入键" />
            </el-form-item>
            <el-form-item label="值" prop="value">
                <el-input v-model="formData.value" placeholder="请输入值" />
            </el-form-item>
            <el-form-item label="字典tag样式" prop="css">
                <el-select v-model="formData.css" placeholder="请选择字典tag样式">
                    <el-option v-for="item in cssList" :key="item.id" :label="item.key" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="formData.sort" :min="1"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { addReq, updateReq } from '@/api/sys/dict/data/index.js'

const visible = ref(false)

const formData = reactive({
    id: '',
    type: '',
    key: '',
    value: '',
    css: '',
    sort: 1,
})

const rules = reactive({
    key: [{ required: true, message: '请输入键', trigger: 'blur' }],
    value: [{ required: true, message: '请输入值', trigger: 'blur' }],
})

const props = defineProps({
    querySelective: Function,
    dictType: String
})

const title = ref('')
const actionType = ref('')
const loading = ref(false)
const open = (type, row) => {
    if (type == 'add') {
        actionType.value = type
        title.value = '添加字典数据'
        formData.type = props.dictType
        formData.key = ''
        formData.value = ''
        formData.css = ''
        formData.sort = 1
        formRef.value?.resetFields()
        visible.value = true;
    }
    if (type == 'update') {
        actionType.value = type
        title.value = '修改字典数据'
        formData.id = row.id
        formData.type = row.type
        formData.key = row.key
        formData.value = row.value
        formData.css = row.css
        formData.sort = row.sort
        visible.value = true;
    }

}

defineExpose({
    open
})

const close = () => {
    visible.value = false;
}

const formRef = ref()
const addOrUpdate = async () => {
    const valid = await formRef.value?.validate() // 改变这一行
    if (valid) {
        if (actionType.value == 'add') {
            const res = await addReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询列表
                props.querySelective();
                close();
            }
        }
        if (actionType.value == 'update') {
            const res = await updateReq(formData);
            if (res.code == 200) {
                // 添加成功！
                ElMessage.success(res.message)
                // 查询列表
                props.querySelective();
                close();
            }
        }
    }
}

const cssList = ref([
    {key:'info',value:'info'},
    {key:'success',value:'success'},
    {key:'primary',value:'primary'},
    {key:'warning',value:'warning'},
    {key:'danger',value:'danger'},
])
</script>